<template>
  <div>
    <LoveDog v-for="(item,index) in list" :key="index" :dogImgUrl="item.dogImgUrl" :dogName="item.dogName"
    @LoveDog="loveFn" />

    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item,index) in loveList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import LoveDog from './components/LoveDog.vue';
export default {
  data() {
    return {
      list: [
        {
          dogImgUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.gs6fHk4tA3rbNJ8o8SslCAHaHa?pid=ImgDet&rs=1",
          dogName: "博美",
        },
        {
          dogImgUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.sCN_FeHrOsx9q_gZFBVqBgHaF_?pid=ImgDet&rs=1",
          dogName: "泰迪",
        },
        {
          dogImgUrl: "https://tse2-mm.cn.bing.net/th/id/OIP-C.9NxAxsFI_6iOmBCDDn84FQHaJ4?pid=ImgDet&rs=1",
          dogName: "金毛",
        },
        {
          dogImgUrl: "https://tse1-mm.cn.bing.net/th/id/OIP-C.UxIa__8U1ObB23rsKW2PkAHaG_?pid=ImgDet&rs=1",
          dogName: "哈士奇",
        },
        {
          dogImgUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.06a9c89fc4578f8d4d098d6ac01b7759?rik=PVuIAEYmXp2PKg&riu=http%3a%2f%2fwww.xiao89.com%2fuploads%2fallimg%2f190619%2f10-1Z619160432.jpg&ehk=Ab43fSuk1NJBWCNWgkTleVS5Uw73s5QloPaHWe%2bhpQ4%3d&risl=&pid=ImgRaw&r=0",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl: "https://p1.ssl.qhimg.com/t010e8e5a09a731bc96.jpg",
          dogName: "萨摩耶",
        },
      ],
      loveList: []
    };
  },
  methods: {
    loveFn(dogName) {
      this.loveList.push(dogName)
    }
  },
  components: { LoveDog }
}
</script>


<style>

</style>